/**
 * 目标1：设置频道下拉菜单
 *  1.1 获取频道列表数据
 *  1.2 展示到下拉菜单中
 */

async function getChannelList() {
    const res = await axios({
        //// 已在request.js中配置了基地址
        url: '/v1_0/channels'
    })
    console.log(res);   //由于响应拦截器，这里返回的数据是经过拦截器处理过的data
    // console.log(res.data.channels[0]);

    //<option value="1">频道1</option>
    document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
}
getChannelList()


/**
 * 目标2：文章封面设置
 *  2.1 准备标签结构和样式
 *  2.2 选择文件并保存在 FormData
 *  2.3 单独上传图片并得到图片 URL 网址
 *  2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
 */

document.querySelector('.img-file').addEventListener('change', async function () {
    // console.log(this.files[0]);
    const fd = new FormData()
    fd.append('image', this.files[0])

    const result = await axios({
        url: '/v1_0/upload'      //已在request.js中配置了基地址
        , method: 'post',
        data: fd
    })

    console.log(result);
    console.log(result.data.url);
    // console.log(result.message);
    const imgUrl = result.data.url

    //img标签的图片url属性是src
    document.querySelector('.rounded').src = imgUrl
    document.querySelector('.rounded').classList.add('show')
    //（隐藏 + 号上传标签）
    document.querySelector('.place').classList.add('hide')
})
//图片再次更改，点击img标签触发input元素
document.querySelector('.rounded').addEventListener('click', () => {
    document.querySelector('.img-file').click()  // 注意这里加上了圆括号  , 表示调用这个 click 方法模拟人为点击
})

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */


document.querySelector('.send').addEventListener('click', async function () {
    if (this.innerText === '发布') {
        const form = document.querySelector('.art-form')
        const data = serialize(form, { hash: true, empty: true })
        console.log(data);
        //删除id属性
        delete data.id
        console.log(data);
        //加入图片url  存入data对象内
        data.cover = {
            type: 1,
            images: [document.querySelector('.rounded').src]
        }
        console.log(data);

        try {
            const result = await axios({
                url: '/v1_0/mp/articles',
                method: 'post',
                data
            })
            console.log(result);

            //调用 Alert 警告框反馈结果给用户
            myAlert(true, '发布成功')

            //成功后 , 重置表单并跳转到列表页
            form.reset()

            document.querySelector('.rounded').src = ''
            document.querySelector('.rounded').classList.remove('show')
            //（显示 + 号上传标签）
            document.querySelector('.place').classList.remove('hide')
            //富文本编辑器内容重置   调用setHtml方法
            editor.setHtml('')

            //停留1.5秒后跳转到列表页
            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1500)

        } catch (err) {
            console.dir(err);
            myAlert(false, err.response.data.message)
        }
    }
})

    /**
     * 目标4：编辑-回显文章
     *  4.1 页面跳转传参（URL 查询参数方式）
     *  4.2 发布文章页面接收参数判断（共用同一套表单）
     *  4.3 修改标题和按钮文字
     *  4.4 获取文章详情数据并回显表单
     */

    //如果传入了图书的id说明是编辑文章  执行
    // 否则为发布文章页面
    ; (function () {
        //拿到路径中的id参数字符串
        // console.log(location.search);   //?id=63f4179a-5831-4e8c-8526-b0a9add865c8
        // console.log(location.search.split('=')[1]);   //63f4179a-5831-4e8c-8526-b0a9add865c8
        // 通过api获取路径中id参数
        const params = new URLSearchParams(location.search)
        params.forEach(async (value, key) => {
            // console.log(value, key);  //63f4179a-5831-4e8c-8526-b0a9add865c8   id
            //forEach方法遍历 当前的key为id  当前的value为id的值
            //当前有id  说明是编辑文章  执行一下代码块
            if (key === 'id') {
                document.querySelector('.title span').innerHTML = '编辑文章'
                document.querySelector('.send').innerHTML = '修改'

                //数据回显
                //这个接口在path路径传入 id 获取对应图书信息
                const res = await axios({
                    url: `v1_0/mp/articles/${value}`
                })
                console.log(res);

                //组织我仅仅需要的数据对象，为后续遍历回显到页面上做铺垫
                const dataObj = {
                    title: res.data.title,
                    content: res.data.content,
                    imgUrl: res.data.cover.images[0],
                    channel_id: res.data.channel_id,
                    //有个隐藏的name = id表单元素，用于存储id，方便后面获取表单时获取id
                    id: res.data.id
                }
                //遍历数据 映射到页面
                //遍历dataObj对象
                Object.keys(dataObj).forEach(key => {
                    if (key === 'imgUrl') {
                        if (dataObj[key]) {
                            document.querySelector('.rounded').src = dataObj[key]
                            document.querySelector('.rounded').classList.add('show')
                            //（隐藏 + 号上传标签）
                            document.querySelector('.place').classList.add('hide')
                            //本次的key取到的value已经回显,结束本次,继续执行下一次回调
                            return
                        }
                    } else if (key === 'content') {
                        //富文本  调用setHtml方法
                        editor.setHtml(dataObj[key])
                        return
                    }
                    //通过name属性找到对应的input元素
                    document.querySelector(`[name=${key}]`).value = dataObj[key]
                })
            }
        })
    })()

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */


document.querySelector('.send').addEventListener('click', async function () {
    // 5.1 判断按钮文字，区分业务（因为共用一套表单）
    if (this.innerHTML === '修改') {
        try {
            const form = document.querySelector('.art-form')
            const data = serialize(form, { hash: true, empty: true })
            // console.log(data);

            const res = await axios({
                url: `/v1_0/mp/articles/${data.id}`,
                method: 'put',
                //解构data，包括id title channel_id content
                //加入其他参数
                data: {
                    ...data,
                    cover: {
                        type: document.querySelector('.rounded').src ? 1 : 0
                        //接口要求图片传入字符串数组格式
                        , images: [document.querySelector('.rounded').src]
                    }
                }
            })
            console.log(res);

            myAlert(true, '修改成功')

            //成功后 , 重置表单并跳转到列表页
            form.reset()

            document.querySelector('.rounded').src = ''
            document.querySelector('.rounded').classList.remove('show')
            //（显示 + 号上传标签）
            document.querySelector('.place').classList.remove('hide')
            //富文本编辑器内容重置   调用setHtml方法
            editor.setHtml('')

            //停留1.5秒后跳转到列表页
            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1500)
        } catch {
            myAlert(false, '修改失败')
        }
    }
})